<template>
	<view class="container" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的二维码</block>
		</cu-custom>
		<view class="content-i" :style="[{height:winHeight+'px'}]">
			<view class="all-con">
				<image class="bg" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/cust-bg.png"
				 mode=""></image>
				<view class="layer"></view>
				<view class="title">
					{{title}}
				</view>
				<image class="img" :src="img" mode=""></image>
				<view class="tips">
					{{tips}}
				</view>
			</view>
			<view class="use-btn" v-if="status==2" @click="download">
				下载收款二维码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				winHeight: 0,
				img: '',
				title: '',
				tips: '',
				status: '',
				shareImg: ''
			}
		},
		onLoad(options) {
			var that = this
			var userInfo = uni.getStorageSync('userInfo')
			that.status = options.status
			if (options.status == 1) {
				this.$request({
					url: '/Agents/getinviteCode',
					success: res => {
						if (res.data.status == 1) {
							that.img = res.data.data
							that.title = '商户入驻'
							that.tips = '扫描二维码，添加我的商户'
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			} else {
				this.$request({
					url: '/Shop/getPaycodeNew',
					data: {
						user_id: userInfo.id
					},
					success: res => {
						if (res.data.status == 1) {
							that.img = res.data.data.path
							that.title = res.data.data.shop_name
							that.shareImg = res.data.data.download_pay_code
							// that.tips = ''
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						let winHeight = res.windowHeight
						that.winHeight = winHeight - that.CustomBar;
					}
				})
			}, 50)
		},
		methods: {
			download() {
				if (this.shareImg == '') {
					uni.showToast({
						title: '下载还未生成~'
					})
					return
				}
				uni.downloadFile({
					url: this.shareImg,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style>
	.content-i {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
	}

	.all-con {
		width: 587rpx;
		height: 728rpx;
		position: relative;
	}

	.all-con .bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
	}

	.all-con .layer {
		position: absolute;
		top: 130rpx;
		left: 50%;
		margin-left: -260rpx;
		width: 520rpx;
		height: 600rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		box-shadow: 4rpx 5rpx 10rpx 8rpx rgba(0, 0, 0, .1);
		background: transparent;
		z-index: 0;
	}

	.title {
		position: absolute;
		top: 175rpx;
		left: 0;
		width: 100%;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
		z-index: 30;
	}

	.tips {
		position: absolute;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		z-index: 3;
	}

	.img {
		width: 400rpx;
		height: 400rpx;
		z-index: 3;
		/* margin: 30rpx auto; */
		position: absolute;
		top: 240rpx;
		left: 50%;
		margin-left: -200rpx;
		display: block;
		border-radius: 8rpx;
	}

	.use-btn {
		width: 300rpx;
		height: 60rpx;
		color: #fff;
		background: #F34930;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		bottom: 20rpx;
		border-radius: 8rpx;
		left: 50%;
		transform: translateX(-150rpx);
		font-size: 24rpx;
	}
</style>
